import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router-dom'
import { Tabs, Menu, Dropdown, Icon, Modal, Button } from 'antd';
import '../../static/tero/map.less';

import Navv from './navigation.jsx';
import u from '../../common.js'
import $ from 'jquery'
import SubMenu from 'antd/lib/menu/SubMenu';
import 'antd/dist/antd.css';

const TabPane = Tabs.TabPane;
const MenuItemGroup = Menu.ItemGroup;

class map extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            names: [],
            disList: [1, 2, 3, 4, 5],
            historyList: [],
            roundList: [],
            distance: 3,
            flag: true,
            index: 0,
            search: [{ src: "../../static/image/tou_fifty.png", title: '宋中继' }, { src: "../../static/image/tou_fifty.png", title: '王小筱' }, { src: "../../static/image/tou_fifty.png", title: '鲁达' }, { src: "../../static/image/tou_fifty.png", title: '宋中继' }, { src: "../../static/image/tou_fifty.png", title: '钱度' }, { src: "../../static/image/tou_fifty.png", title: '李四' },],
            base: [],
            display: [1],
            num: 0,
            visible: false,
            caiji: false,
            clickGo: "2",
            msg: '',
            longitude: '',
            distances: '',
            latitude: '',
            address: ''
        }
    }

    componentDidMount() {
        // 获取历史记录
        this.onGetHistory()
        this.onClickMap()
    }

    onClickMap() {
        const { BMap, BMAP_STATUS_SUCCESS } = window
        var map = new BMap.Map("allmap");
        var point = new BMap.Point(91.121398, 29.65004);
        map.centerAndZoom(point, 12);
        // 开启缩放
        map.setDefaultCursor("pointer");
        map.enableScrollWheelZoom(true);

        var geoc = new BMap.Geocoder();

        let that = this

        function showInfo(e) {
            // if (that.state.num > 5) {
            //     setTimeout(() => {
            //         map.clearOverlays()
            //     }, 2000)
            //     return
            // }
            let dis = that.state.distance

            map.clearOverlays()
            var mPoint = new BMap.Point(e.point.lng, e.point.lat);
            var marker = new BMap.Marker(mPoint);
            map.addOverlay(marker);
            map.centerAndZoom(point, 14);
            var label = new BMap.Label("当前范围：" + dis + "KM", { offset: new BMap.Size(-40, 370) });
            marker.setLabel(label);

            var circle = new BMap.Circle(mPoint, dis * 1000, {
                fillColor: "blue",
                strokeWeight: 1,
                fillOpacity: 0.3,
                strokeOpacity: 0.3
            });
            map.addOverlay(circle);

            var pt = e.point;
            geoc.getLocation(pt, function (rs) {
                var addComp = rs.addressComponents;
                let address = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber
                that.setState((prevState, props) => ({
                    longitude: e.point.lng,
                    latitude: e.point.lat,
                    address: address,
                    visible: true,
                }));
                // if (that.state.caiji) {
                //     u.diTu({
                //         "id": 14,
                //         "longitude": e.point.lng,
                //         "latitude": e.point.lat,
                //         "distance": dis,
                //         'isPost': 0,
                //         'address': address
                //     }, data => {

                //     })
                // }
            })
        };
        map.addEventListener("click", showInfo);
    }

    onGetHistory() {
        u.findPosition(data => {
            this.setState((prevState) => ({
                historyList: data.PositionList
            }))
        })
    }

    onDetail(item) {
        this.setState({
            clickGo: "1"
        })
        u.morePostion({
            p_id: item.id
        }, data => {
            this.setState({
                roundList: data.roundList
            })
        })
    }


    show() {
        if ($('.info').is(':hidden')) {
            $('.info').show(500)
        } else {
            $('.info').hide(500)
        }
    }

    handleMenuClick = (e) => {
        this.setState(prevState => ({
            distance: e.key
        }));
    }

    MenuItem = (e) => {
        // this.setState(prevState => ({
        //     distance: e.key
        // }));
    }

    showModal = () => {
        this.setState({
            visible: true,
        });
    }

    handleOk = (e) => {
        u.diTu({
            "id": 14,
            "longitude": this.state.longitude,
            "latitude": this.state.latitude,
            "distance": this.state.distance,
            'isPost': 0,
            'address': this.state.address
        }, data => {
            this.setState(prevState => ({
                visible: false,
            }))
            this.onGetHistory()
        })

    }

    // getNum () {
    //     u.getNum(data => {
    //         this.setState({
    //             msg: data.msg
    //         })
    //     })
    // }

    handleCancel = (e) => {
        this.setState({
            visible: false,
            caiji: false,
        });
    }

    render() {
        const menu = (
            <Menu onClick={this.handleMenuClick}>
                {
                    this.state.disList.map((item, index) => {
                        return (
                            <Menu.Item key={item}>{item}公里内</Menu.Item>
                        )
                    })
                }
            </Menu>
        )

        return (
            <div className='tero_father'>
                <Modal
                    title="采集信息"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                >
                    <p>{this.state.msg === '' ? '是否采集信息('+  this.state.address.replace(/\,\s/g,"")+')': this.state.msg}</p>
                </Modal>
                <Navv names={this.state.names} />
                {/* <div className='mapbox' onClick={() => { this.sureClick() }}> */}
                <div className='mapbox'>
                    <div className="kilometre">
                        <Dropdown overlay={menu} trigger={['click']} onClick={this.handleMenuClick}>
                            <a className="ant-dropdown-link" href="#">
                                选择操作 <Icon type="down" />
                            </a>
                        </Dropdown>
                    </div>

                    {/* <div id="allmap" style={{ position: "absolute", top: 0, left: 0, width: '100%', height: '695px' }}></div> */}
                    <div className='list'>

                        <Tabs defaultActiveKey="2" activeKey={this.state.clickGo} onChange={(activeKey) => { this.setState({ clickGo: activeKey }) }}>
                            <TabPane tab="附近的人" key="1">
                                <Menu onSelect={this.MenuItem} mode="inline" className="historyStyle2">
                                    {
                                        this.state.roundList ?
                                            this.state.roundList.map((item, index) => {
                                                return (
                                                    <Menu.Item className="subStyle" key={index}>
                                                        <Link to={{ pathname: "/tero/l2", state: { id: item.id, userName: item.user_name } }}>
                                                            <div className="people">
                                                                <span>{item.user_name}</span> <span><strong>{item.distance}公里以内</strong></span>
                                                            </div>
                                                            <div className="interest">{item.signature}</div>
                                                        </Link>
                                                    </Menu.Item>
                                                )
                                            }) : ''
                                    }
                                </Menu>
                            </TabPane>
                            <TabPane tab="历史记录" key="2">
                                <Menu onSelect={this.MenuItem} className="historyStyle">
                                    {
                                        this.state.historyList.map((item, index) => {
                                            return (
                                                <Menu.Item className="subStyle2" key={index} onClick={() => { this.onDetail(item) }}>
                                                    <div className="main">
                                                        <span>{index + 1}、历史点击</span> <span className="right">{item.create_time}</span><br />
                                                        <span>{item.address}</span> <span className="right">{item.isPost === 1 ? '已采集' : '未采集'}</span><br />
                                                        <span>{item.latitude + ',' + item.longitude}</span>  <span className="right">采集范围：{item.distance}公里以内</span>
                                                    </div>
                                                </Menu.Item>
                                            )
                                        })
                                    }
                                </Menu>
                            </TabPane>
                        </Tabs>

                        {/* <Menu onSelect={this.MenuItem}>
                            <Menu.Item disabled={true}><h1>附近的人</h1><span className={ (this.state.display.length > 0) ? 'history': ''}>历史记录{this.state.display.length}</span></Menu.Item>
                            <Menu.Item className="subStyle" key={'1'}>
                            <span></span><span>一公里以内</span>
                            </Menu.Item>
                            <Menu.Item className="subStyle" key={'2'}>
                            <span></span><span>两公里以内</span>
                            </Menu.Item>
                            <Menu.Item className="subStyle" key={'3'}>
                            <span></span><span>三公里以内</span>
                            </Menu.Item>
                            <Menu.Item className="subStyle" key={'4'}>
                            <span></span><span>四公里以内</span>
                            </Menu.Item>
                            <Menu.Item className="subStyle" key={'5'}>
                            <span></span><span>五公里以内</span>
                            </Menu.Item>
                        </Menu> */}
                    </div>

                    <div className="miss">
                        123123
                    </div>

                    <div id="allmap" className='map' style={{ height: '695px' }} onClick={this.showModal}>
                        {/* 
                        <div className='info'>
                            <ul>
                                <li>
                                   <div className='info-left'>
                                   <img src={require('../../static/image/Avatar.png')} alt=""/>
                                   </div>
                                    <div className='info-right'>
                                       <div className='info-right-top'>
                                       <h4>明松</h4>
                                        <img src={require('../../static/image/man.png')} alt=""/>
                                       </div>                                    
                                       <p>100米以内</p>                          
                                    </div>
                                </li>
                                <li>                                    
                                  <p>地区</p>                                   
                                  <span>南京，江苏</span>
                                </li>
                                <li>                                    
                                  <p>地区</p>                                   
                                  <span>南京，江苏</span>
                                </li>
                                <li>                                    
                                  <p>地区</p>                                   
                                  <span>南京，江苏</span>
                                </li>
                                <li>
                                    <p>相册</p>
                                    <ul>
                                        <li>
                                            <img src={require('../../static/image/tero_nav_one.png')} alt=""/>
                                            <img src={require('../../static/image/tero_nav_one.png')} alt=""/>
                                            <img src={require('../../static/image/tero_nav_one.png')} alt=""/>
                                            <img src={require('../../static/image/tero_nav_one.png')} alt=""/>
                                        </li>
                                    </ul>
                                    <strong>  >  </strong>
                                </li>
                            </ul>
                        </div> */}
                    </div>
                </div>

            </div>
        )
    }
}




export default map